<template>
    <div>
        <span class="open-account-btn" @click="handleVisible(true)" v-if="btnVisible">
            <!-- 自定义选择商品按钮 -->
            <slot name="btn">
                <el-button type="primary" :disabled="disabled">开通账户</el-button>
            </slot>
        </span>
        <el-dialog
            class="open-account-dialog"
            align-center
            title="选择开通类型"
            v-model="visible"
            width="40%"
            @close="closeCallback()">
            <div class="open-account-dialog-body">
                <div class="open-account-dialog-main">
                    <div
                        class="open-account-dialog-box"
                        v-for="{ label, name } in boxList"
                        :key="name"
                        @click="handleRouter(name)">
                        <div class="custom-img" :class="'custom-img-' + name"></div>
                        <span class="custom-label">{{ label }}</span>
                    </div>
                </div>
                <div class="open-account-dialog-bottom">
                    （<span>同一个营业执照</span>仅可开通1个账户；<span>同一个身份证</span>仅可开通1个账户。）
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, unref } from 'vue';
import { cloneDeep, isEmpty } from '@/commons/utils';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();

/* ---------------------------------- 父级通信 start ---------------------------------- */
const emit = defineEmits(['handle-confirm']);
const props = defineProps({
    // 是否显示控制按钮
    btnVisible: {
        type: Boolean,
        default: true
    },
    // 是否禁用
    disabled: {
        type: Boolean,
        default: false
    },
    // 指定路径前缀
    pathPrefix: {
        type: String,
        default: '/finance/baohutong'
    }
});
/* ---------------------------------- 父级通信 end ---------------------------------- */

/* ---------------------------------- 弹窗数据 start ---------------------------------- */
const boxList = reactive([
    { name: 'enterprise', label: '企业账户' },
    { name: 'individual', label: '个体工商户' },
    { name: 'person', label: '个人账户' }
]);
/* ---------------------------------- 弹窗数据 end ---------------------------------- */

/* ---------------------------------- 控制弹窗 start ---------------------------------- */
let visible = ref(false); // 弹窗展示隐藏
// 展示隐藏
const handleVisible = (isVisible = false) => {
    if (props.disabled) {
        return;
    }
    visible.value = isVisible;
};
// 关闭后回调
const closeCallback = visible => {};

// 控制路由跳转
const handleRouter = name => {
    router.push({
        path: props.pathPrefix + '/' + name
    });
    handleVisible(false);
};

/* ---------------------------------- 控制弹窗 end ---------------------------------- */
</script>

<style lang="scss">
.open-account {
    &-dialog {
        max-width: 500px;
        min-width: 500px;
        &-main {
            box-sizing: border-box;
            padding: 40px 34px 60px;
            display: flex;
            justify-content: space-between;
        }
        &-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #ffffff;
            border-radius: 8px;
            border: 1px solid #eaeaea;
            transition: all 0.3s;
            width: 100px;
            height: 100px;
            box-sizing: border-box;
            cursor: pointer;
            .custom-img {
                width: 36px;
                height: 36px;
                background-size: 100% 100%;
                background-position: center center;
                background-repeat: no-repeat;
            }
            .custom-img-person {
                background-image: url(@/assets/imgs/sys/account_icon_geren.png);
            }
            .custom-img-individual {
                background-image: url(@/assets/imgs/sys/account_icon_geti.png);
            }
            .custom-img-enterprise {
                background-image: url(@/assets/imgs/sys/account_icon_qiye.png);
            }
            .custom-label {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #585858;
                margin-top: 12px;
                transition: color 0.3s;
            }
            &:hover {
                background: #fff5f1;
                border: 1px solid #ff6b00;
                .custom-label {
                    color: #ff6b00;
                }
                .custom-img-person {
                    background-image: url(@/assets/imgs/sys/account_icon_geren_hover.png);
                }
                .custom-img-individual {
                    background-image: url(@/assets/imgs/sys/account_icon_geti_hover.png);
                }
                .custom-img-enterprise {
                    background-image: url(@/assets/imgs/sys/account_icon_qiye_hover.png);
                }
            }
        }
        &-bottom {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #585858;
            padding-bottom: 4px;
            span {
                color: #fe292b;
            }
        }
    }
    &-btn {
        margin-right: 16px;
    }
}
</style>
<style lang="scss" scoped></style>
